<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>试题</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/exam.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div id="doumee">

	<header class="header">
		<a class="left_icon back_btn" @click="exit" data-type='3'></a>
		<h4 class="title">试题</h4>
	</header>
	
	<div class="swiper-container bg-w Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="examTest">
					<ul class="res-1 flex-row">
						<li class="timeCot h5 flex-full">考试进度：<span class="progress">{{cur+1}}/{{subject.length}}</span></li>
						<li class="infoCot h6 tr">
							剩余时长<br />
							<span style="color:#B1242A;">00 : 01 : 00</span>
						</li>
					</ul>
					
					<dl class="testMod">
						<dt class="titleMod">
							<h4 class="title">{{cur+1}}.<span class="type">【{{subject[cur].type == 0 ? '单选' : '多选'}}】</span>{{subject[cur].title}}</h4>
							<div class="photo" v-if="subject[cur].cover != null">
								<img :src="subject[cur].cover" />
							</div>
							<audio class="audio" v-if="subject[cur].audio" :src="subject[cur].audio" controls="controls"></audio>
						</dt>
						<dd class="optMod">
							<div class="option" v-for="(item,index) in subject[cur].sub">
								<label class="flex-row flex-top">
									<input :disabled="show" :type="subject[cur].type == 0 ? 'radio' : 'checkbox'" :name="subject[cur].id" :value="index" v-model="!select[cur] && subject[cur].type == 1 ? select[cur]=[] : select[cur]" @change="rankIpt" />
									<div :class="subject[cur].sub[index].correct == 0 && show ? 'error sel' : 'sel'" :data-type="subject[cur].sub[index].correct == 1 && show ? '1' : '0'">
										<span>{{option[index]}}</span>
									</div>
									<span class="title flex-full">{{item.answer}}</span>
								</label>
								<div class="photo" v-if="item.cover != null">
									<img :src="item.cover" />
								</div>
								<audio class="audio" v-if="item.audio != null" :src="item.audio" controls="controls"></audio>
							</div>
						</dd>
					</dl>
					
					<div class="resBox top-line" v-if="show">
						<div class="res-head h5">
							你的答案：
							<template v-if="subject[cur].correct != subject[cur].selAns">
								<span style="color:#e90000">{{subject[cur].selAns}}</span>
							</template>
							<template v-else>
								<span style="color:#51bbed">{{subject[cur].selAns}}</span>
							</template>
							&nbsp;&nbsp;正确答案：{{subject[cur].correct}}
						</div>
						<h5 class="name">答案解析：</h5>
						<div class="intro h5">
							{{subject[cur].intro}}
						</div>
					</div>
					
					<a @click="submit" class="examStartBtn tc" style="margin-bottom: 40px;">提交答案</a>
					
					
					<div class="tr total">
						正确：<span style="color:#51bbed">{{res.correct}}</span>&nbsp;&nbsp;
						错误：<span style="color:#e90000">{{res.error}}</span>
					</div>
				</div>
				
			</div>
		</div>
	</div>

</div>

<!--模拟题目数据-->
<script src="js/subject.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#doumee",
	data:{
		subject:subject,
		cur:0,
		show:false,
		option:['A','B','C','D'],
		select:[],
		res:{
			correct:0,
			error:0
		},
	},
	methods:{
		//退出考试
		exit:function(){
			dmAlert('是否退出考试？',{
				enter:'继续考试',
				cancel:'退出考试',
				fail:function(){
					history.go(-1);
				}
			})
		},
		//提交
		submit:function(e){
			var target = e.currentTarget;
			
			//正确答案
			var correct = [];
			for(var i=0;i<this.subject[this.cur].sub.length;i++){
				if(this.subject[this.cur].sub[i].correct == 1){
					correct.push(this.option[i]);
				};
			};
			Vue.set(this.subject[this.cur],'correct',correct.join(''));
			
			//选择答案
			var selAns = [];
			if(this.select[this.cur] instanceof Array){
				for(var j=0;j<this.select[this.cur].length;j++){
					selAns.push(this.option[this.select[this.cur][j]]);
				};
			}else{
				selAns.push(this.option[this.select[this.cur]]);
			};
			Vue.set(this.subject[this.cur],'selAns',selAns.join(''));
			
			if(!this.show){
				if(this.select.length-1 == this.cur){
					
					if(this.select[this.cur] instanceof Array && this.select[this.cur].length == 0){
						tip('请选择答案');
					}else{
						this.show = !this.show;
						if(this.cur < this.subject.length-1){
							target.innerText = '下一题';
						}else{
							target.innerText = '查看成绩';
						};
						if(this.subject[this.cur].correct == this.subject[this.cur].selAns){
							this.res.correct ++ ;
						}else{
							this.res.error ++ ;
						};
					};
				}else{
					tip('请选择答案');
				};
			}else{
				if(this.cur < this.subject.length-1){
					this.show = !this.show;
					this.cur = this.cur + 1 ;
					this.swiper.setWrapperTranslate(0);
					this.swiper.update();
					target.innerText = '提交答案';
				}else{
					location.href = 'examRes.html';
				};
			};
		},
		//考试时间到
		endTest:function(){
			tip('考试时间已到，考试结束',function(){
				location.href = 'examRes.html';
			});
		},
		//排序
		rankIpt:function(){
			if(this.select[this.cur] instanceof Array){
				this.select[this.cur].sort();
			};
		}
	},
	mounted:function(){
		this.swiper = pullSwiper('#Main');
	},
	watch:{
		select:function(val){
			console.log(val)
		}
	}
});

</script>

</body>
</html>
